<template>
	<!-- 轮播图的最外侧容器 -->
  <Swiper class="swiper" :options="swiperOption">
		<!-- 每个SwiperSlide对应轮播图的一屏 -->
    <SwiperSlide class="item">第1屏</SwiperSlide>
    <SwiperSlide class="item">第2屏</SwiperSlide>
    <SwiperSlide class="item">第3屏</SwiperSlide>
    <SwiperSlide class="item">第4屏</SwiperSlide>
		<!-- 小圆点区域 -->
    <div class="swiper-pagination" slot="pagination"></div>
		<!-- 左箭头（上一张） -->
    <div class="swiper-button-prev" slot="button-prev"></div>
		<!-- 右箭头（下一张） -->
    <div class="swiper-button-next" slot="button-next"></div>
  </Swiper>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'

  export default {
    name: 'Test',
    components: {Swiper,SwiperSlide},
    data() {
      return {
        swiperOption: {
          slidesPerView: 1, //同时展示几屏
          spaceBetween: 150, //屏与屏之间的距离
          loop: true, //是否开启循环轮播
					// 指定小圆点的位置
          pagination: {
            el: '.swiper-pagination', //小圆点所在容器
            clickable: true //小圆点是否可以点击
          },
					// 左箭头与右箭头
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .item{
		height: 300px;
		background-image: linear-gradient(45deg,red,yellow,green);
		font-size: 40px;
	}
</style>